<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <title>登录</title>
    <link rel="icon" href="<?php echo base_url();?>media/admin/img/favicon.ico">
    <!-- CSS start -->
    <link rel="stylesheet" href="<?php echo base_url();?>media/admin/icofont/style.css">
    <link rel="stylesheet" href="<?php echo base_url();?>media/admin/css/style.min.css">
    <!-- CSS over -->
    <!-- JS start -->
    <script src="<?php echo base_url();?>media/admin/js/jquery-1.9.1.min.js"></script>
    <script src="<?php echo base_url();?>media/admin/js/plugins.js"></script>
    <script src="<?php echo base_url();?>media/admin/js/laydate/laydate.js"></script>
    <script src="<?php echo base_url();?>media/admin/js/scripts.js"></script>
    <!-- JS over -->
</head>


<body>
    <!-- main start -->
    <div class="page page-login">
        <!-- background start -->
        <div class="background">
            <video class="video" loop muted></video>
            <div class="cover"></div>
        </div>
        <!-- background over -->
        <!-- brand start -->
        <div class="brand">
            <h1 class="title">SCCX自动交易管理系统</h1>
            <h5 class="subtitle">后台管理系统</h5>
        </div>
        <!-- brand over -->
        <!-- login start -->
        <div class="login">
            <form class="form" id="login" action="<?php echo base_url();?>login/signin" onkeydown="keyLogin();" method="POST">
                <fieldset class="form-group">
                    <input type="text" class="input" id="username" name="admin[user_name]" placeholder="用户名" autofocus value="">
                </fieldset>
                <fieldset class="form-group">
                    <input type="password" class="input" id="password" name="admin[user_password]" placeholder="密码" value="">
                </fieldset>
                <fieldset class="form-group">
                    <label class="radiocheckbox-item">
                        <input type="checkbox" class="radiocheckbox" hidden>
                        <span class="radiocheckbox-replace"></span>
                        <p>记住我</p>
                    </label>
                </fieldset>
                <div class="button-group">
                    <button type="button" class="button button-block" id="button" onclick="loginDemo();">登录</button>
                </div>
                <!-- 错误提示 -->
                <p class="alert alert-red" id="alert" hidden>用户名或密码错误</p>
            </form>
        </div>
        <!-- login over -->
        <!-- copyright start -->
        <div class="copyright">
            <p>Powered by <a href="http://www.maszy.cn" target="_blank">© ZhiYe Software Technology Co.,Ltd</a></p>
        </div>
        <!-- copyright over -->

    </div>
    <!-- main over -->
    <script src="<?php echo base_url();?>media/admin/js/bideo/bideo.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // background
            var bv = new Bideo();
            bv.init({
                videoEl: document.querySelector('.video'),
                resize: true,
                src: [{
                    src: '<?php echo base_url();?>media/admin/img/page-login.mp4',
                    type: 'video/mp4'
                }],
                onLoad: function() {
                    document.querySelector('.page-login').style.opacity = '1';
                }
            });
        });
        // 回车登录
        function keyLogin() {
            if (event.keyCode == 13) {
                document.getElementById("button").click();
            }
        };
        // login demo
        function loginDemo() {
            var username = $("#username").val();
            var password = $("#password").val();
            if (username == "" || password == "") {
                $(".login").addClass("login-invalid");
                setTimeout(function() {
                    $(".login").removeClass("login-invalid");
                }, 1000);
                $("#alert").removeAttr('hidden');
            } else {
                $("#login").submit();
            }
        }
    </script>
</body>

</html>
